<template>
    <div>
        <iframe v-if="$route.meta.src" :src='$route.meta.src' class="iframe" ref="iframe"></iframe>
        <iframe v-else :src="urlPath" class="iframe" ref="iframe"></iframe>
    </div>

</template>

<script>
    import NProgress from 'nprogress';

    export default {
        name: "IFrameComponent",
        data() {
            return {
                urlPath: this.getUrlPath() //iframe src 路径
            }
        },
        mounted() {
            this.load();
            this.resize();
        },
        methods: {
            // 显示等待框

            // 隐藏等待狂
            hide() {
                NProgress.done();
            },
            resize() {// 加载浏览器窗口变化自适应
                window.onresize = () => {
                    this.iframeInit();
                };
            },
            load() {// 加载组件
                this.$route.meta.src = this.$route.meta.src
                    ? this.$route.meta.src.replace("$", "#")
                    : "";

                //超时3s自动隐藏等待狂，加强用户体验
                let time = 3;
                const timeFunc = setInterval(() => {
                    time--;
                    if (time == 0) {
                        this.hide();
                        clearInterval(timeFunc);
                    }
                }, 1000);
                this.iframeInit();
            },
            iframeInit() {//iframe窗口初始化
                const iframe = this.$refs.iframe;
                const clientHeight = document.documentElement.clientHeight - 56;
                iframe.style.height = `${clientHeight}px`;
                if (iframe.attachEvent) {
                    iframe.attachEvent("onload", () => {
                        this.hide();
                    });
                } else {
                    iframe.onload = () => {
                        this.hide();
                    };
                }
            },
            getUrlPath: function() {
                //获取 iframe src 路径
                let url = window.location.href
                url = url.replace('/iframe', '')
                return url
            }
        }
    }
</script>

<!--<style>
    html{
        background: red;
        overflow-y: auto;
        &::-webkit-scrollbar {display:none}
    }
</style>-->
<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .iframe {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
</style>